@(info: Option[Any])(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.service.OpenIDConnectService
@import gitbucket.core.util.DatabaseConfig
@gitbucket.core.html.main("System settings"){
  @gitbucket.core.admin.html.menu("system"){
    @gitbucket.core.helper.html.information(info)
    <form action="@context.path/admin/system" method="POST" validate="true" class="form-horizontal" autocomplete="off">
      <ul class="nav nav-tabs fill-width" id="settings-tab">
        <li><a href="#system">System settings</a></li>
        <li><a href="#integrations">Integrations</a></li>
        <li><a href="#authentication">Authentication</a></li>
      </ul>
      <div class="tab-content fill-width" style="padding-top: 20px;">
        <div class="tab-pane" id="tab-system">
          @settings_system(info)
        </div>
        <div class="tab-pane" id="tab-integrations">
          @settings_integrations(info)
        </div>
        <div class="tab-pane" id="tab-authentication">
          @settings_authentication(info)
        </div>
      </div>
      <hr>
      <div class="align-right" style="margin-top: 20px;">
        <input type="submit" class="btn btn-success" value="Apply changes"/>
      </div>
    </form>
  }
}
<script>
$(function(){
  function updateTabs(){
    $('ul.nav-tabs li').removeClass('active');
    $('div.tab-pane').removeClass('active');

    // Determine active tab from hash
    if(location.hash == '#authentication'){
      $('li:has(a[href="#authentication"])').addClass('active');
      $('div#tab-authentication').addClass('active');
    } else if(location.hash == '#integrations'){
      $('li:has(a[href="#integrations"])').addClass('active');
      $('div#tab-integrations').addClass('active');
    } else {
      $('li:has(a[href="#system"])').addClass('active');
      $('div#tab-system').addClass('active');
    }
  }

  // Set hash when tab is clicked
  $('#settings-tab li a').click(function(e){
    location.href = $(e.delegateTarget).attr("href");
    updateTabs();
  });

  updateTabs();
});
</script>
